<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <form class="form-horizontal m-t" id="signupForm">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">产品：</label>
                            <div class="col-sm-3">
                                <input id="productId" name="productId" class="form-control" type="number"
                                       placeholder="产品的id号" style="width: 220px">
                                <span class="col-sm-12" style="color: #ff6600;width:400px;">输入产品管理查询到的id号，或者点击按下面的下拉框</span>
                                <div class="dropdown">

                                    分类：<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu3"
                                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"
                                    >
                                        <span id="dropdownMenu3span"></span>请选择分类
                                        <span class=" caret"></span>
                                    </button>
                                    <ul class="dropdown-menu bg-info" style="background-color: #e5ffff;">
                                        <li th:each="category : ${categoryList}"><a href="#" th:class="${category.categoryId}"  th:onclick="'javascript:catclick3(\''+${category.categoryId}+'\', \''+${category.categoryName}+'\');'" >[[${category.categoryId}]] . [[${category.categoryName}]]</a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="dropdown">
                                    产品：
                                    <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu2"
                                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"
                                    >
                                        请选择产品
                                        <span class=" caret"></span>
                                    </button>
                                    <ul class="dropdown-menu bg-info" style="background-color: #e5ffff;">
                                        <li class="proli"  th:each="product : ${products}"  th:attr="categoryId=${product.categoryId}"><a href="#"  th:onclick="'javascript:catclick2(\''+${product.productId}+'\', \''+${product.shebeiName}+'\', \''+${product.chengben}+'\'
                                        , \''+${product.shebeiChengben}+'\', \''+${product.anzhuangChengben}+'\');'" >[[${product.productId}]] . [[${product.shebeiName}]]</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <!--<label class="col-sm-3 control-label">项目id：</label>-->
                            <div class="col-sm-8">
                                <input id="projectId" th:value="${projectId}" name="projectId" class="form-control"
                                       type="hidden">
                            </div>
                        </div>
                        <!--<div class="form-group">
                            <label class="col-sm-3 control-label">是产品吗：</label>
                            <div class="col-sm-8">
                            <input id="isProduct" name="isProduct" class="form-control" type="text">
                            </div>
                        </div>-->
                        <input id="sonsysId" name="sonsysId" th:value="${sonsysId}" class="form-control" type="hidden">

                        <div class="form-group">
                            <label class="col-sm-3 control-label">报价：</label>
                            <div class="col-sm-8">
                                <input id="baojia" name="baojia" class="form-control" type="number" placeholder="自动计算人机材的2倍"
                                readonly>
                            </div>

                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">折扣：</label>
                            <div class="col-sm-8">
                                <input id="zhekou" name="zhekou" class="form-control" type="number" placeholder="输入0.00-1.00的小数">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">实际报价（报价*折扣）：</label>
                            <div class="col-sm-4">
                                <input id="shijibaojia" name="shijibaojia" class="form-control" type="number" readonly placeholder="按一下计算即可">
                            </div>
                            <div class="col-sm-5"><button id="calshijibaojiabtn" onclick="calshijibaojiabtn()" type="button" class="btn btn-success btn-sm ">计算一下实际报价</button></div>

                        </div>


                        <div class="form-group">
                            <label class="col-sm-3 control-label">数量：</label>
                            <div class="col-sm-8 input-group spinner">
                                <input id="proNum" name="proNum" class="form-control" type="number" value="1">
                                <div class="input-group-btn-vertical" style="margin-left: 15px;">
                                    <button class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>
                                    <button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>
                                </div>
                            </div>

                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">备注：</label>
                            <div class="col-sm-8">
                                <input id="beizhu" name="beizhu" class="form-control" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">子系统排序：</label>
                            <div class="col-sm-8" >
                                <input id="orderId" name="orderId" class="form-control" type="number">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-8 col-sm-offset-3">
                                <button type="submit" class="btn btn-primary">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="include::footer"></div>
<script type="text/javascript" src="/js/appjs/system/productInner/add.js">
</script>
<script type="text/javascript">

    $(function () {
       $("#calshijibaojiabtn").click(function () {

           var productId  = $("#productId").val();
           if(productId==null||productId==''||productId=='undefined'){

               layer.msg("请输入产品ID");
               return;
           }
           $.ajax({
               url: "/system/product/get/" + productId,
               type: "get",

               success: function (r) {
                   if (r.code == 0) {
                       $("#baojia").val(r.baojia);
                   } else {
                       layer.msg(r.msg);
                   }
               }
           });

           var baojia = $("#baojia").val();
           var zhekou = $("#zhekou").val();
           if(zhekou==null||zhekou==''||zhekou=='undefined'){

               layer.msg("请输入折扣");
               return;
           }
           $("#shijibaojia").val(cheng(baojia,zhekou));
       });
    });

    function catclick(catId, catName) {
        $("#dropdownMenu1").text(catName);
        $("#sonsysId").val(catId);

    }
    function catclick2(catId, catName,chengben,shebeiChengben,anzhuangChengben) {

        var catID = $("#dropdownMenu3span").text();


        $("#dropdownMenu2").text(catName);
        $("#productId").val(catId);

        var sum = add(chengben,shebeiChengben);
        sum = add(sum,anzhuangChengben);
        $("#baojia").val(sum);
        var zhekou = $("#zhekou").val();
        if(zhekou=='undefined'){
            zhekou = 1;
        }

        $("#shijibaojia").val(cheng(sum,zhekou));

    }
    function add(arg1,arg2){
        var a1,a2,m;
        try{
            a1 = arg1.toString().split(".")[1].length
        }catch(e){
            a1 = 0;
        }
        try{
            a2 = arg2.toString().split(".")[1].length
        }catch(e){
            a2 = 0;
        }
        m = Math.pow(10, Math.max(a1,a2));
        return (arg1*m+arg2*m)/m;
    }
    function cheng(arg1, arg2){
        var m=0,s1=arg1.toString(),s2=arg2.toString();
        try{m+=s1.split(".")[1].length}catch(e){}
        try{m+=s2.split(".")[1].length}catch(e){}
        return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)
    }

    function catclick3(catId, catName) {
        $("#dropdownMenu2").text("请选择产品");
        $("#productId").val(null);
        $("#dropdownMenu3").text(catName);
        $("#dropdownMenu3span").text(catId);


        $(".proli").each(function () {
            $(this).show();
            var categoryId = $(this).attr("categoryid");
            console.log(categoryId);
            if(categoryId!=catId){
                $(this).hide();
            }
        });

    }

    $(function () {
        $('.spinner .btn:first-of-type').on('click', function() {
            $('.spinner input').val( parseInt($('.spinner input').val(), 10) + 1);
        });
        $('.spinner .btn:last-of-type').on('click', function() {
            $('.spinner input').val( parseInt($('.spinner input').val(), 10) - 1);
        });
    });
</script>
</body>
<style>

    .spinner {
        width: 100px;
    }
    .spinner input {
        text-align: right;
        margin-left: 15px;
    }
    .input-group-btn-vertical {
        position: relative;
        white-space: nowrap;
        width: 2%;
        vertical-align: middle;
        display: table-cell;
        margin-left: 15px;
    }
    .input-group-btn-vertical > .btn {
        display: block;
        float: none;
        width: 100%;
        max-width: 100%;
        padding: 8px;
        margin-left: 15px;
        position: relative;
        border-radius: 0;
    }
    .input-group-btn-vertical > .btn:first-child {
        border-top-right-radius: 4px;
    }
    .input-group-btn-vertical > .btn:last-child {
        margin-top: -2px;
        border-bottom-right-radius: 4px;
    }
    .input-group-btn-vertical i{
        position: absolute;
        top: 0;
        left: 4px;
    }
</style>
</html>
